/** @odoo-module **/
const {
    markup,
    Component,
    onWillStart,
    useEnv,
    useSubEnv,
    useChildSubEnv,
    useRef,
    useState,
    mount,
    xml,
    whenReady,
    onMounted,
    onError,
    loadFile,
    onWillUpdateProps,
    useEffect,
    useComponent
} = owl;

class Toast extends Component {
    static template = xml`
    <div class="modal-backdrop fade show" t-if="props.is_open" style="z-index:1055;opacity: 0.2;"></div>
    <div class="modal fade" id="toast">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5">提示</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!--<t t-esc="props.data.msg"/>-->
                    <t t-out="props.data.msg"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" t-on-click.stop="handleOnCancel" t-if="props.data.isCancel">
                        取消
                    </button>
                    <button type="button" class="btn btn-primary" t-on-click.stop="handleOnConfirm">
                        <t t-esc="props.data.confirmBtnText || '确定'"/>
                    </button>
                    <button type="button" class="btn btn-primary" t-on-click.stop="handleOnConfirm2" t-if="props.data.confirmBtnText2">
                        <t t-esc="props.data.confirmBtnText2 || '确定2'"/>
                    </button>
                </div>
            </div>
        </div>
    </div>
    `;
    static props = {
        is_open: {type: Boolean},
        data: {type: Object}
    };

    setup() {
        onMounted(() => {
            let _this = this;
            this.Modal = new bootstrap.Modal('#toast', {});

            document.getElementById('toast').addEventListener('hidden.bs.modal', event => {
                _this.env.closeToast();
            })
        });

        onWillUpdateProps(nextProps => {
            // console.log(nextProps);
            if (nextProps.is_open) {
                return this.open(nextProps.data);
            }
        });

        this.handleOnConfirm = _.debounce(this.onConfirm,300);
        this.handleOnConfirm2 = _.debounce(this.onConfirm2,300);
        this.handleOnCancel = _.debounce(this.onCancel,300);
    }

    open(data) {
        this.Modal.show();
    }

    async onConfirm() {
        if (typeof (this.props.data.onConfirm) == 'function') {
            await this.props.data.onConfirm();
        }
        this.Modal.hide();
    }

    onCancel() {
        if (typeof (this.props.data.onCancel) == 'function') {
            this.props.data.onCancel();
        }
        this.Modal.hide();
    }

    onConfirm2(){
        if (typeof (this.props.data.onConfirm2) == 'function') {
            this.props.data.onConfirm2();
        }
        this.Modal.hide()
    }
}

export {
    Toast
}
